<template>
  <view class="wcb-page">
    <form @submit="onSubmit">
      <uni-section title="选择上车点" type="line"/>
      <view class="wcb-site-list">
        <radio-group @change="startRadioChange" name="startSiteId">
          <view class="wcb-site-name" v-for="(item,idx) in startSiteList">
            <view class="wcb-site-name-left">
              <view class="wcb-site-name-up">上</view>
              <view class="wcb-site-name-label">{{item.siteName}}</view>
            </view>
            <view class="wcb-site-name-right">
              <view class="wcb-site-name-time">{{item.startTime}}</view>
              <view class="wcb-site-name-check">
                  <label>
                    <radio :value="item.id" :checked="formSubmit.startSiteId === item.id" style="transform:scale(0.7)"></radio>
                  </label>
              </view>
            </view>
          </view>
        </radio-group>
      </view>
      <uni-section title="选择下车点" type="line"/>
      <view class="wcb-site-list">
        <radio-group @change="endRadioChange" name="endSiteId">
          <view class="wcb-site-name" v-for="(item,idx) in endSiteList">
            <view class="wcb-site-name-left">
              <view class="wcb-site-name-up wcb-site-name-down">下</view>
              <view class="wcb-site-name-label">{{item.siteName}}</view>
            </view>
            <view class="wcb-site-name-right">
              <view class="wcb-site-name-time">{{item.startTime}}</view>
              <view class="wcb-site-name-check">
                <label>
                  <radio :value="item.id" :checked="formSubmit.endSiteId === item.id" style="transform:scale(0.7)"></radio>
                </label>
              </view>
            </view>
          </view>
        </radio-group>
      </view>
      <view class="wcb-btn-group">
        <button type="primary" form-type="submit" class="wcb-btn" :disabled="!(formSubmit.startSiteId && formSubmit.endSiteId)">去购票</button>
      </view>
    </form>


  </view>
</template>

<script>
export default {
  data() {
    return {
      formSubmit:{
        startSiteId: 0,
        endSiteId: 0
      },
      startSiteList:[
        {
          id: 1,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 2,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 3,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 4,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 5,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },
      ],
      endSiteList:[
        {
          id: 15,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 16,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 17,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 18,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },{
          id: 19,
          siteName: '城市广场公交站',
          startTime: '12:00'
        },
      ]
    };
  },
  methods:{
    onSubmit(e){
      console.log('submit',e);
      uni.navigateTo({
        url: '/pages/orderBuy/orderBuy'
      })
    },
    endRadioChange(e){
      this.formSubmit.endSiteId = e.detail.value;
    },
    startRadioChange(e){
      this.formSubmit.startSiteId = e.detail.value;
    }
  }
}
</script>

<style lang="scss">
  .wcb-site-list{
    background: #FFFFFF;
    margin: 10rpx;
    padding: 10rpx 0;
    border-radius: 10rpx;
  }
  .wcb-site-name{
    display: flex;
    font-size: 24rpx;
    margin: 10rpx;
    background: #f2f2f2;
    padding: 10rpx;
    position: relative;
    .wcb-site-name-left,.wcb-site-name-right{
      display: flex;
    }
    .wcb-site-name-up{
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      justify-content: center;
      width: 35rpx;
      height: 35rpx;
      background: #007aff;
      color: white;
      border-radius: 8rpx;
      margin-right: 10rpx;
      font-size: 18rpx;
    }
    .wcb-site-name-down{
      background: #ea6969;
    }
    .wcb-site-name-right{
      position: absolute;
      right: 20rpx;
    }
    .wcb-site-name-time{
      padding-right: 12rpx;
    }
  }
  .wcb-btn-group{
    margin: 40rpx 20rpx;
  }
</style>
